<template>
  <el-sub-menu index="5">
    <template #title>事件查询</template>
    <el-menu-item index="5-1" @click="Search">事件查询</el-menu-item>
    <el-menu-item index="5-2" @click="high_sourceClear">取消查询</el-menu-item>
  </el-sub-menu>

  <el-dialog class="event-list" v-model="result" width="80%" draggable center>
    <h1>事件列表</h1>
    <el-table class="table" :data="arr1" border style="width: 96%">
      <el-table-column prop="事件编号" label="事件编号" width="150" />
      <el-table-column prop="事件类型" label="事件类型" width="150" />
      <el-table-column prop="事件等级" label="事件等级" width="90" />
      <el-table-column prop="发生地点" label="发生地点" width="150" />
      <el-table-column prop="发生时间" label="发生时间" width="150" />
      <el-table-column prop="车牌号" label="车牌号" width="150" />
      <el-table-column prop="驾驶员" label="驾驶员" />
      <el-table-column prop="处理状态" label="处理状态" width="100" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      small
      :current-page="page"
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="result = false">事件位置</el-button>
        <el-button type="primary" @click="statistics1">
          查看所有事件统计图
        </el-button>
        <el-button type="primary" @click="handleheat(map)"> 热力图 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="eventchart" width="70%" draggable>
    查看所有事件统计图
    <RoseChart :data="data1" v-bind="config1" />
  </el-dialog>
</template>

<script setup>
import { ref } from "vue"
import statistics from "./hooks/statistics"
import { LineChart, PieChart, RoseChart } from "@opd/g2plot-vue"
import { EventSearch } from "./hooks/EventSearch"

const map = ref()
onMounted(() => {
  //初始化地图
  map.value = useGlobalMap()
})
// 解构封装搜索return值
const {
  high_sourceClear,
  Search,
  handleCurrentChange,
  handleheat,
  arr,
  arr1,
  result,
  page,
  total,
} = EventSearch(map)

// 事件统计图数据
var data1
const eventchart = ref(false)
function statistics1() {
  data1 = []
  eventchart.value = true
  const { data } = statistics(arr)

  data1 = data
}
const config1 = {
  data1,
  xField: "type",
  yField: "value",
  seriesField: "type",
  radius: 0.9,
  legend: {
    position: "bottom",
  },
}
</script>

<style lang="less">
.table {
  margin: 20px;
}
.event-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1200px;
  h1 {
    margin-left: 15px;
  }
}
</style>
